<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>colormaps</title>
    <link rel="stylesheet" href="light.css" />
  </head>
  <body>
    <noscript>
      <strong
        >niivue doesn't work properly without JavaScript enabled. Please enable
        it to continue.</strong
      >
    </noscript>
    <header>
      <label for="invertCheck">Invert</label>
      <input type="checkbox" id="invertCheck" unchecked />
      <label for="selectCheck">Green Dragging Selection</label>
      <input type="checkbox" id="selectCheck" unchecked />
      <label for="crossCheck">Green Crosshairs</label>
      <input type="checkbox" id="crossCheck" unchecked />
      <label for="wideCheck">Wide Crosshairs</label>
      <input type="checkbox" id="wideCheck" unchecked />
      <label for="gammaSlider">Gamma</label>
      <input
        type="range"
        min="10"
        max="400"
        value="100"
        class="slider"
        id="gammaSlider"
      />
      <button id="saveBmp">Save Bitmap</button>
    </header>
    <main id="container">
      <canvas id="gl1"></canvas>
    </main>
    <footer>
      <label id="colormaps"></label>
      <p>
      <textarea id="scriptText" name="customText" rows="8" cols="60">
let cmap = {&#10; R: [0, 255, 0],&#10; G: [0, 0, 255],&#10; B: [0, 0, 0],&#10; A: [0, 64, 64],&#10; I: [0, 85, 255],&#10;};&#10;
</textarea>
      &nbsp;<button id="custom">custom</button>&nbsp;
    </footer>
  </body>
</html>
<script type="module" async>
  import * as niivue from "../dist/index.js";
  
  var slider = document.getElementById("gammaSlider");
  slider.oninput = function () {
    nv1.setGamma(this.value * 0.01);
  };
  invertCheck.onchange = function () {
    nv1.volumes[0].colormapInvert = this.checked;
    nv1.updateGLVolume();
  }
  selectCheck.onchange = function () {
    if (this.checked)
      nv1.setSelectionBoxColor([0, 1, 0, 0.7]);
    else
      nv1.setSelectionBoxColor([1, 1, 1, 0.5]);
  }
  crossCheck.onchange = function () {
    if (this.checked)
      nv1.setCrosshairColor([0, 1, 0, 1]);
    else
      nv1.setCrosshairColor([1, 0, 0, 1]);
  }
  wideCheck.onchange = function () {
    if (this.checked)
      nv1.setCrosshairWidth(3);
    else
      nv1.setCrosshairWidth(1);
  }
  document.getElementById("custom").addEventListener("click", doCustom);
  function doCustom() {
    var val = document.getElementById("scriptText").value;
    val += ';let key = "Custom"; nv1.addColormap(key, cmap); nv1.volumes[0].colormap = key;nv1.updateGLVolume();';
    val && eval(val);
  }
  document.getElementById("saveBmp").addEventListener("click", doSaveBmp);
  function doSaveBmp() {
    nv1.saveScene("ScreenShot.png");
  }
  var volumeList1 = [
    {
      url: "../images/mni152.nii.gz",
      colormap: "gray",
      opacity: 1,
      visible: true,
    },
  ];
  var nv1 = new niivue.Niivue({backColor: [0.3, 0.3, 0.3, 1]});
  await nv1.attachTo("gl1");
  nv1.loadVolumes(volumeList1);
  nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS;
  nv1.opts.isColorbar = true;
  let cmaps = nv1.colormaps();
  let cmapEl = document.getElementById("colormaps");
  for (let i = 0; i < cmaps.length; i++) {
    let btn = document.createElement("button");
    btn.innerHTML = cmaps[i];
    btn.onclick = function () {
      nv1.setColormap(nv1.volumes[0].id, cmaps[i]);
    };
    cmapEl.appendChild(btn);
  }
</script>
